<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
  <head>
    <title>班级管理-编辑</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/bootstrap/bootstrap.min.css" media="all">
    <style>
      .layui-form-select {
        width: 100% !important;
      }
      
      .layui-form-select .layui-input {
        height: 34px;
      }
    </style>
  </head>
  <body style="font-size: 0.9rem;" class="m-3">
    <div class="d-flex flex-column layui-form">
      <div class="d-flex mb-4">
        <div class="col d-flex">
          <label class="d-flex align-items-center" style="width: 80px;margin: 0px;">所属学院:</label>
          <input id="collogeId" value="${classByClassId.collogeId}" type="hidden"/>
          <select id="selectColloge" name="interest" lay-filter="selectColloge">
            <option value=""></option>
            <c:forEach items="${collogeAll}" var="item">
              <option value="${item.collogeId}" <c:if
                test="${item.collogeId == classByClassId.collogeId}">selected</c:if>>${item.collogeName}</option>
            </c:forEach>
          </select>
        </div>
        <div class="col d-flex">
          <label class="d-flex align-items-center" style="width: 80px;margin: 0px;">所属专业:</label>
          <input id="calssId" value="${classByClassId.calssId}" type="hidden"/>
          <input id="majorId" value="${classByClassId.majorId}" type="hidden"/>
          <select id="selectMajor" name="interest1" lay-filter="selectMajor">
            <option value=""></option>
            <c:forEach items="${majorListClass}" var="dom">
              <option value="${dom.majorId}" <c:if
                test="${dom.majorId == classByClassId.majorId}">selected</c:if>>${dom.majorName}</option>
            </c:forEach>
          </select>
        </div>
      </div>
      <div class="d-flex">
        <div class="col d-flex">
          <label style="width: 80px;margin: 0px;" class="d-flex align-items-center">班级名称:</label>
          <input class="form-control form-control-sm" id="className" value="${classByClassId.calssName}"/>
        </div>
        <div class="col d-flex">
          <label style="width: 80px;margin: 0px;" class="d-flex align-items-center">班级序号:</label>
          <input id="orderNum" class="form-control form-control-sm" value="${classByClassId.orderNum}"/>
        </div>
      </div>
    </div>
    <script src="${pageContext.request.contextPath}/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/lay-config.js" charset="utf-8"></script>
    <script src="${pageContext.request.contextPath}/js/http.js" charset="utf-8"></script>
    <script>
        var layer = null;
        layui.use(['form', 'layer'], function () {
            var form = layui.form;
            layer = layui.layer;
            //监听学院选择事件
            form.on('select(selectColloge)', function (data) {
                console.log(data)
                //设置选中的学院
                $("#collogeId").val(data.value);
                //清空专业下拉数据
                $("#selectMajor option:gt(0)").remove();
                //根据学院id获取专业列表
                getMajorById(data.value)
            })
            //专业选择的监听
            form.on('select(selectMajor)', function (data) {
                //设置选中的专业id
                $("#majorId").val(data.value)
            })
        })
        
        //获取专业列表
        function getMajorById(collogeId) {
            http.get("/class.do?method=getMajorList&collogeId=" + collogeId, null, function (result) {
                $.each(result.data, function (index, item) {
                    $("#selectMajor").append(new Option(item.majorName, item.majorId));
                })
                //动态生成表单，需要render 渲染一下，否则不会显示
                layui.form.render("select")
            })
        }

        //获取输入框的值
        function getParms() {
            //获取学院id
            var collogeId = $("#collogeId").val();
            if (!collogeId) {
                layer.msg('请选择学院!');
                return;
            }
            //获取专业id
            var majorId = $("#majorId").val();
            if (!majorId) {
                layer.msg('请选择专业!');
                return;
            }
            //获取班级名称
            var className = $("#className").val();
            if (!className) {
                layer.msg('请填写班级名称!');
                return;
            }
            //获取序号
            var orderNum = $("#orderNum").val();
            if (!orderNum) {
                layer.msg('请填写班级序号!');
                return;
            }
            return {
                calssId:$("#calssId").val(),
                collogeId: collogeId,
                majorId: majorId,
                className: className,
                orderNum: orderNum
            }
        }
    </script>
  </body>
</html>
